<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />

    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <svg width="162" height="184" viewBox="0 0 162 184" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M13.5 7.5V184" stroke="black" stroke-width="26" stroke-dasharray="180" stroke-dashoffset="180" id="path1" />
      <animate href="#path1" attributeName="stroke-dashoffset" to="0" dur="1s" fill="freeze" id="pathAni1" />
      <path d="M13 86H153" stroke="black" stroke-width="26" stroke-dasharray="150" stroke-dashoffset="150" id="path2" />
      <animate href="#path2" attributeName="stroke-dashoffset" to="0" dur="0.6s" fill="freeze" begin="pathAni1.end" id="pathAni2" />
      <path d="M148.5 0.5V184" stroke="black" stroke-width="26" stroke-dasharray="190" stroke-dashoffset="190" id="path3" />
      <animate href="#path3" attributeName="stroke-dashoffset" to="0" dur="1s" fill="freeze" begin="pathAni2.end" />
    </svg>
    <svg width="295" height="297" viewBox="0 0 295 297" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M66.9998 3C56.4998 57.5 33.6998 167.9 26.4998 173.5C19.2998 179.1 87.4998 229.5 122.5 254" stroke="black" stroke-width="26" />
      <path d="M10.5 77C16.9 76.6 79.8333 75.1667 110.5 74.5C107 112.167 95.8 192.2 79 211C62.2 229.8 26.3333 270.167 10.5 288" stroke="black" stroke-width="26" />
      <path d="M146 32H267.5L212.5 102.5C216.333 158.333 221.7 271.1 212.5 275.5C203.3 279.9 169.333 281.333 153.5 281.5" stroke="black" stroke-width="26" />
      <path d="M133 148H289.5" stroke="black" stroke-width="26" />
    </svg>
  </body>
</html>
